<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
		<style>
			#register{
				display: flex;
				/* align-items: center; */
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<h1 style="text-align: center;">健身房会员注册</h1>
		<div id="regist">
			<div id="register">
				<el-form label-width="80px" :model="user" :rules="rules" ref="userForm"
					style="margin-top: 50px;">
					<el-form-item label="昵称" prop="userName">
						<el-input v-model="user.userName" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sexId">
						<el-radio-group v-model="user.sexId">
							<el-radio-button label="1">男</el-radio-button>
							<el-radio-button label="0">女</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="生日" prop="birth">
						<el-date-picker v-model="user.birth" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="手机号" prop="userPhone">
						<el-input v-model="user.userPhone" style="width: 300px;"></el-input>
						<!-- <el-button @click="sendCode">获取验证码</el-button> -->
					</el-form-item>
					<!-- <el-form-item label="验证码" prop="code">
			  			<el-input v-model="user.code" style="width: 300px;"></el-input>
			  		</el-form-item> -->
					<el-form-item label="密码" prop="password">
						<el-input v-model="user.password" style="width: 300px;" show-password></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="pwdConfirm" :error="errors.code">
						<el-input v-model="user.pwdConfirm" style="width: 300px;" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm">会员注册</el-button>
						<el-button type="info"><a href="login.html"
								style="text-decoration: none;color: white;">已有账号点击进入登录界面</a></el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#regist",
			data() {
				return {
					radio: '1',
					user: {
						userName: "",
						sexId: "",
						birth: "",
						userPhone: "",
						password: "",
						pwdConfirm: "",

					},
					errors: {
						code: ""
					},
					rules: {
						userName: [{
								required: true,
								message: '用户名不能为空',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 12,
								message: '用户名长度在 1 到 12个字符',
								trigger: 'blur'
							}
						],

						sexId: [{
							required: true,
							message: '必须设置性别',
							trigger: 'blur'
						}],

						birth: [{
							required: true,
							message: '必须设置生日',
							trigger: 'blur'
						}],

						userPhone: [{
							required: true,
							message: '必须填写电话号码',
							trigger: 'blur'
						}, {
							validator: (rule, value, callback) => {
								if (/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
									.test(value)) {
									callback();
								} else {
									callback(new Error("手机号码填写不符合规范"));
								}
							},
							trigger: 'blur'
						}],

						password: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						}, {
							validator: (rule, value, callback) => {
								if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
									callback();
								} else {
									callback(new Error("密码必须包含字母和数字，且在6~18位之间"));
								}
							},
							trigger: "blur"
						}],

						pwdConfirm: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						}, {
							validator: (rule, value, callback) => {
								if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
									callback();
								} else {
									callback(new Error("密码必须包含字母和数字，且在6~18位之间"));
								}
							},
							trigger: "blur"
						}]
					}
				}
			},
			methods: {
				submitForm() {
					let _this = this;
					_this.errors.code = "";
					_this.$refs.userForm.validate((valid) => {
						if (!valid) {
							console.log("表单校验未通过");
						} else {
							if (_this.user.password != _this.user.pwdConfirm) {
								_this.errors.code = "两次输入的密码不一致";
							} else {
								axios.post("/member/register", {
									userName: _this.user.userName,
									sexId: _this.user.sexId,
									birth: _this.user.birth,
									userPhone: _this.user.userPhone,
									password: _this.user.password,
									pwdConfirm: _this.user.pwdConfirm
								}, {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									transformRequest: function(data) {
										return Qs.stringify(data);
									}
								}).then(function(res) {
									let result = res.data;
									if (result.code = 201) {
										location.href = "login.html";
										alert("注册成功！！")
									} else {
										alert(result.errMsg);
									}
								});
							}

						}
					});
				}
			},
			mounted() {

			}
		});
	</script>
</html>
